<!--
 * @Author: wangzm
 * @Date: 2020-01-20 11:08:26
 * @LastEditors: wangzm
 * @LastEditTime: 2020-03-04 14:38:20
 * @Description: sort-bar
 -->
<template>
  <view class="sort-bar-conatiner">
    <view class="sort-bar">
      <view class="sort-item" :class="{ active: sort.all === 1 }" @click="handleClick('all')">综合</view>
      <view v-if="currentPlatform === 'VOP'" class="sort-item" :class="{ active: sort.discount === 1 }" @click="handleClick('discount')">
        <text>折扣</text>
        <view class="icon">
          <b-image :src="discountImage" mode="widthFix" />
        </view>
      </view>
      <view v-else class="sort-item" :class="{ active: sort.sales === 1 }" @click="handleClick('sales')">
        <text>销量</text>
        <view class="icon">
          <b-image :src="saleImage" mode="widthFix" />
        </view>
      </view>
      <view class="sort-item" :class="{ active: sort.price !== null }" @click="handleClick('price')">
        <text>价格</text>
        <view class="icon">
          <b-image :src="priceImage" mode="widthFix" />
        </view>
      </view>
      <view v-if="currentPlatform === 'BX'" class="sort-item" :class="{ active: sort.news === 1 }" @click="handleClick('news')">上新</view>
      <view v-if="platformList.length > 1 && selectProducts === null" class="sort-item" :class="{ active: showFilter || filterFlag }" @click="handleFilterClick">
        <text>筛选</text>
      </view>
    </view>
    <!-- 筛选 -->
    <view v-if="showFilter" class="pop-layer" @touchmove.stop.prevent="" @click="showFilter = false"></view>
    <view class="comm-pop price-range" :class="{ active: showFilter }">
      <view class="p-range-title">商品来源</view>
      <view class="p-range-content">
        <view v-for="(item, index) in platformList" :key="index" class="platform-item" :class="{ active: item.platform === platform }" @click="setPlatform(item)">{{ item.name }}</view>
      </view>
      <template v-if="platform !== 'BX'">
        <view class="p-range-title">商品价格</view>
        <view class="p-range-input">
          <input v-model="tKSort.lowPrice" placeholder="最低价" class="input" type="number" />
          <text class="line">-</text>
          <input v-model="tKSort.highPrice" placeholder="最高价" class="input" type="number" />
        </view>
      </template>
      <view class="p-range-btn">
        <text class="btn btn-l" @click="handleReset">重置</text>
        <text class="btn btn-r" @click="handleSure">确认</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'SortBar',
  props: {
    sort: {
      type: Object,
      default() {
        return {
          all: null,
          sales: null,
          news: null,
          price: null,
          sortValue: 'DESC'
        }
      }
    },
    currentPlatform: {
      type: String,
      default: 'BX'
    },
    platformList: {
      type: Array,
      default() {
        return []
      }
    },
    selectProducts: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      filterFlag: false,
      showFilter: false,
      platform: 'BX',
      tKSort: {
        sortKey: '', // 佣金：commission，销量：sales ，价格：price， 折扣: discount,
        sortValue: '', // ASC 正序/ DESC 逆序
        highPrice: '',
        lowPrice: ''
      }
    }
  },
  computed: {
    saleImage() {
      let picStr = null
      if (this.currentPlatform === 'BX') {
        if (this.sort.sales === 1) {
          picStr = this.sort.sortValue === 'DESC' ? 0 : 1
        }
      } else if (this.tKSort.sortKey === 'sales') {
        picStr = this.tKSort.sortValue === 'DESC' ? 0 : 1
      }
      return `/static/images/common/sort_arrow_${picStr || 0}.png`
    },
    discountImage() {
      let picStr = null
      if (this.tKSort.sortKey === 'discount') {
        picStr = this.tKSort.sortValue === 'DESC' ? 0 : 1
      }
      return `/static/images/common/sort_arrow_${picStr || 0}.png`
    },
    priceImage() {
      let picStr = null
      if (this.currentPlatform === 'BX') {
        picStr = this.sort.price
      } else if (this.tKSort.sortKey === 'price') {
        picStr = this.tKSort.sortValue === 'DESC' ? 0 : 1
      }
      return `/static/images/common/sort_arrow_${picStr || 0}.png`
    }
  },
  methods: {
    handleClick(type) {
      this.showFilter = false
      const sortQuery = {
        all: null,
        sales: null,
        news: null,
        price: null,
        sortValue: this.sort.sortValue
      }

      // 碧选
      if (type === 'price') {
        sortQuery.price = this.sort.price === 1 ? 0 : 1
      } else {
        sortQuery[type] = 1
      }

      // 碧划算
      if (this.currentPlatform !== 'BX') {
        sortQuery[type] = 1
        if (type === 'all') {
          this.tKSort.sortKey = ''
          this.tKSort.sortValue = ''
        } else {
          if (this.tKSort.sortKey === type) {
            this.tKSort.sortValue = this.tKSort.sortValue === 'DESC' ? 'ASC' : 'DESC'
          } else {
            this.tKSort.sortValue = type === 'sales' ? 'DESC' : 'ASC'
          }
          this.tKSort.sortKey = type
        }
      }
      this.toSearch(sortQuery)
    },
    handleFilterClick() {
      this.platform = this.currentPlatform
      this.showFilter = true
    },
    setPlatform(item) {
      this.platform = item.platform
      if (this.platform === 'BX') {
        this.handleReset()
      }
    },
    handleReset() {
      this.filterFlag = false
      this.platform = 'BX'
      this.tKSort.lowPrice = ''
      this.tKSort.highPrice = ''
      this.showFilter = false
      this.$emit('setPlatform', 'BX')
      this.$emit('change', {
        sortQuery: {
          all: 1,
          sale: null,
          news: null,
          price: null
        },
        tKSort: {
          sortKey: '', // 佣金：commission，销量：sales ，价格：price
          sortValue: '', // ASC 正序/ DESC 逆序
          highPrice: '',
          lowPrice: ''
        }
      })
    },
    handleSure() {
      this.filterFlag = true
      const lowPriceFlag = this.tKSort.lowPrice && Number(this.tKSort.lowPrice) >= 0
      const highPriceFlag = this.tKSort.highPrice && Number(this.tKSort.highPrice) >= 0
      if (lowPriceFlag && highPriceFlag && Number(this.tKSort.lowPrice) > Number(this.tKSort.highPrice)) {
        uni.showToast({ title: '最低价不能高于最高价', icon: 'none' })
        return
      }
      if (highPriceFlag && !this.tKSort.lowPrice) {
        this.tKSort.lowPrice = 0
      }
      if (this.platform !== 'BX') {
        if (this.sort.price !== null) {
          this.tKSort.sortKey = 'price'
          this.tKSort.sortValue = this.sort.price === 0 ? 'DESC' : 'ASC'
        } else if (this.sort.sale) {
          this.tKSort.sortKey = 'sales'
          this.tKSort.sortValue = 'DESC'
        }
      }
      this.$emit('setPlatform', this.platform)
      this.showFilter = false
      this.toSearch()
    },
    toSearch(sortQuery) {
      this.$emit('change', {
        sortQuery: sortQuery || this.sort,
        tKSort: this.tKSort
      })
    }
  }
}
</script>
<style lang="scss">
.sort-bar-conatiner {
  position: relative;
}
.sort-bar {
  @include flex;
  // box-shadow: 0px 10rpx 10rpx 0px rgba(153,174,223,0.1);
  background: #fff;
  position: relative;
  z-index: 9;

  .sort-item {
    @include sub-item;
    @include flex;
    @include center;
    color: #000;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 90rpx;
    position: relative;

    .icon {
      width: 16rpx;
      margin-left: 10rpx;
      line-height: 1;
      font-size: 0;
    }

    &.active {
      color: #000;
      font-weight: bold;

      &::before {
        content: '';
        height: 6rpx;
        border-radius: 3rpx;
        background: #000;
        left: 40%;
        right: 40%;
        bottom: 8rpx;
        position: absolute;
      }
    }
  }
}
.pop-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.comm-pop {
  position: absolute;
  top: 88rpx;
  background-color: #fff;
  width: 100%;
  left: -100%;
  z-index: 3;
  border-radius: 0 0 20rpx 20rpx;
  padding: 34rpx 50rpx 0;
  box-sizing: border-box;
  transform: translateY(-100%);
  transition: transform 0.3s;
  overflow: hidden;
  &.active {
    transform: translateY(0);
    left: 0;
  }
}
.platform-item {
  color: #333;
  font-size: 26rpx;
  text-align: center;
  width: 132rpx;
  line-height: 62rpx;
  margin-right: 30rpx;
  margin-bottom: 24rpx;
  background: #f5f5f5;
  display: inline-block;
  &.active {
    color: #fff;
    background: #000;
  }
}
.p-range-title {
  color: #333;
  font-size: 28rpx;
  line-height: 60rpx;
  font-weight: bold;
  margin: 12rpx 0;
}
.p-range-input {
  @include flex;
  @include a-center;
  .input {
    width: 200rpx;
    text-align: center;
    padding: 16rpx 20rpx;
    background: rgba(247, 247, 247, 1);
    // border-radius: 30rpx;
    font-size: 24rpx;
  }
  .line {
    line-height: 60rpx;
    padding: 0 10rpx;
    color: #eaeaea;
  }
}
.p-range-btn {
  @include flex;
  @include a-center;
  margin: 24rpx -50rpx 0;
  border-top: 1px solid #efefef;

  .btn {
    @include sub-item;
    line-height: 88rpx;
    text-align: center;

    &.btn-r {
      color: #fff;
      background: #000;
    }
  }
}
</style>
